<template>
  <div class="wrapper">
    <div class="title">
      <div class="box1"><i class="el-icon-s-data"></i>&nbsp;&nbsp;投稿统计</div>
      <div class="box2"></div>
    </div>
    <el-table :data="tougaoTable" :cell-style="cellStyle" class="table">
      <el-table-column type="index" label="名次" align="center"></el-table-column>
      <el-table-column prop="name" label="单位名称" align="center"></el-table-column>
      <el-table-column prop="number" label="稿件数量" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TouGaoTongJi",
  data() {
    return {
      cellStyle: {
        "border": 'none',
        'padding': '1px',
        'height': '16px',
        'white-space': 'nowrap'
      },
      tougaoTable: [
        {name: '二七大队', number: 284},
        {name: '金水大队', number: 269},
        {name: '郑东新区大队', number: 222},
        {name: '新郑大队', number: 213},
        {name: '中原大队', number: 203},
      ]
    }
  }
}
</script>

<style scoped lang="less">
.wrapper {
  padding-top: 8px;
}

.title {
  display: flex;
  border-bottom: 1px solid #b2b4b4;
}

.box1 {
  width: 50%;
  height: 40px;
  padding-left: 10px;
  font-size: 20px;
  color: whitesmoke;
  background-color: rgb(72, 157, 226);
  display: flex;
  align-items: center;
  white-space: nowrap;

}

.box2 {
  width: 50%;
  height: 40px;
  background-color: #f8f7f7;
}

</style>